<template>
	<!-- 分享弹窗页面， 利用页面透明遮盖原生导航栏 -->
	<!-- 禁止滚动穿透 page-meta只能是页面第一个节点 -->
	<!-- 安卓平板上这个有点问题，所以添加了@touchmove.stop.prevent="movehandle"来处理安卓平板上的穿透滚动 -->
	<!-- <page-meta :page-style="`overflow: ${isShow ? 'hidden' : 'auto'};`"></page-meta> -->
	<view class="share-shade" @touchmove.stop.prevent="movehandle">
		<!-- 分享底部菜单组件 -->
		<view class="share-footer">
			<view class="footer-list">
				<view class="footer-item" v-for="(item, index) in shareMenuList" :key="index"
					@tap="onTapShareItem(item)">
					<image class="footer-icon" :src="item.src"></image>
					<view class="footer-text">{{item.label}}</view>
				</view>
			</view>
			<view class="footer-hint">
				点击第三方分享将跳转到第三方应用
			</view>
			<view class="footer-cancel" @tap="close">关闭</view>
		</view>
	</view>
</template>

<script>
	import userManager from '@/common/manager/user-manager.js'
	export default {
		name: "share-footer",
		data() {
			return {
				isShow: false, // 分享弹窗显示状态
				shareData: {},
				shareMenuList: [{
						label: '微信',
						provider: 'weixin',
						scene: 'WXSceneSession',
						type: 0,
						src: 'https://mcdn.chatgk.com/xcx/static/images/share/wx.png',
						func: 'WXshare'
					},
					{
						label: '微信朋友圈',
						provider: 'weixin',
						scene: 'WXSceneTimeline',
						type: 0,
						src: 'https://mcdn.chatgk.com/xcx/static/images/share/pyq.png',
						func: 'WXClrcleShare'
					},
					{
						label: 'QQ',
						provider: 'qq',
						type: 0,
						src: 'https://mcdn.chatgk.com/xcx/static/images/share/qq.png',
						func: 'QQShare'
					},
					{
						label: '复制链接',
						provider: 'copy',
						type: 0,
						src: 'https://mcdn.chatgk.com/xcx/static/images/share/copy.png',
						func: 'COPYShare'
					},
				]
			};
		},
		onLoad(options) {
			this.shareData = JSON.parse(decodeURIComponent(options.data))
		},
		methods: {
			/**
			 * @description 关闭弹窗方法
			 */
			close() {
				uni.navigateBack()
			},
			/**
			 * @description 点击分享菜单
			 * @param {Object} item 点击的分享菜单数据
			 */
			onTapShareItem(item) {
				let that = this
				let {
					url,
					title,
					img
				} = that.shareData
				let summary = this.shareData.summary || title


				if (item.provider != 'copy') {
					userManager[item.func](url, title, img, summary)
				} else {
					userManager[item.func](url, title, img).then(() => {
						uni.showToast({
							title: '复制成功',
							duration: 1500
						})
						setTimeout(() => {
							that.close()
						}, 1500)
					})
				}
			},
			movehandle() {
				return false
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}
</style>
<style lang="scss" scoped>
	.share-shade {
		width: 100vw;
		height: 100vh;
		background: transparent;
		background-color: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		z-index: 99999 !important;

		.share-footer {
			width: 100%;
			height: 450rpx;
			background-color: #f8f8f8;
			border-radius: 80rpx 80rpx 0 0;
			position: absolute;
			bottom: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.footer-list {
				width: 86%;
				padding: 50rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.footer-item {
					width: 130rpx;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
					}

					.footer-text {
						font-size: 26rpx;
						line-height: 36rpx;
					}
				}
			}

			.footer-hint {
				font-size: 26rpx;
				line-height: 36rpx;
				color: #999;
			}

			.footer-cancel {
				width: 100%;
				height: 100rpx;
				border: 1px solid rgb(224, 224, 224);
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
</style>